<template>
    
    <div>
        <Tree :data="data" :render="renderContent"></Tree>


      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="分类标题" prop="title">
              <Input v-model="formValidate.title" placeholder="请输入分类标题"></Input>
          </FormItem>
          <FormItem label="分类父ID" prop="parentId">
              <Input v-model="formValidate.parentId"></Input>
          </FormItem>
          <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
              <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
          </FormItem>
      </Form>

    </div>


</template>
<script>
    export default {
        data () {
            return {
              formValidate: {
                    title: '',
                    parentId:''
                },
                ruleValidate: {
                    title: [
                        { required: true, message: '分类标题不能为空', trigger: 'blur' }
                    ]
                },
                data:[],
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                }
            }
        },
        created(){
          // 在初始化阶段，去请求nodejs的api，返回来json数据
          this.getData();

        },
        methods: {

            getData(){
              this.$http.post("http://localhost:3000/cate/list")
              .then((response) => {
                this.data = response.data;
              })
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-plus-empty'
                            }),
                            style: {
                                marginRight: '8px'
                            },
                            on: {
                                click: () => { 
                                  this.formValidate.parentId = data._id;
                                   }
                            }
                        }),
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-minus-empty'
                            }),
                            on: {
                                click: () => { this.remove(root, node, data) }
                            }
                        })
                    ])
                ]);
            },
            remove (root, node, data) {
               console.log(data);

               this.$http({
                 method:'delete',
                 url:`http://localhost:3000/cate/data/${data._id}`
               }).then(res=>{
                 console.log(res);
                 this.getData();
                 this.$Message.success('delete success!');
               })
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {

                        // ajax数据请求

                        this.$http({
                          method: 'post',
                          url:'http://localhost:3000/cate/data',
                          data: this.formValidate
                        }).then(res=>{
                          this.getData();
                          this.$Message.success('Success!');

                         // 重置form表单内容为数据的初始值状态
                         // ********** 非常重要
                         Object.assign(this.$data.formValidate, 
                         this.$options.data().formValidate);


                        })


                        
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>
